<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-03-05 01:32:29
 * @LastEditors: yyh
 * @LastEditTime: 2022-04-20 00:05:46
-->
<!-- 资产入库页面 -->
<template>
  <div>
    <div class="name">
      <span>资产入库</span>
    </div>
    <el-form
      class="register"
      ref="asset"
      :rules="rules"
      :model="asset"
      :label-width="formLabelWidth"
    >
      <el-form-item prop="asset_id" label="资产编号">
        <el-input
          placeholder="请输入内容"
          v-model="asset.asset_id"
          size="small"
          style="width: 500px"
          clearable
        />
      </el-form-item>
      <el-form-item prop="asset_name" label="资产名称">
        <el-input
          placeholder="请输入内容"
          v-model="asset.asset_name"
          size="small"
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item prop="classification" label="资产分类">
        <el-select
          clearable
          placeholder="资产分类"
          v-model="asset.classification"
          size="small"
        >
          <el-option
            v-for="item in classificationData"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="unit" label="单位">
        <el-input
          placeholder="请输入内容"
          v-model="asset.unit"
          size="small"
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item prop="price" label="价格/元">
        <el-input
          placeholder="请输入内容"
          v-model="asset.price"
          size="small"
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item prop="supplier" label="供应商">
        <el-input
          placeholder="请输入内容"
          v-model="asset.supplier"
          size="small"
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item prop="register_time" label="入库时间">
        <el-date-picker
          v-model="asset.register_time"
          size="small"
          type="date"
          placeholder="入库时间"
        />
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-radio style="margin-left: 25px" v-model="asset.status" label="闲置"
          >闲置</el-radio
        >
      </el-form-item>
      <el-form-item class="footer">
        <el-button size="small" type="primary" @click="toInsert"
          >确 定</el-button
        >
        <el-button size="small" @click="resetForm('asset')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Moment from "moment";
export default {
  data() {
    return {
      formLabelWidth: "100px",
      // 资产分类的数据，页面一上来，就发请求，请求所有的资产分类数据，设置到categoryData。
      classificationData: [],
      //表单验证
      rules: {
        asset_id: [
          { required: true, message: "请输入资产编号", trigger: "blur" },
        ],
        asset_name: [
          { required: true, message: "请输入资产名称", trigger: "blur" },
        ],
        classification: [
          { required: true, message: "请选择资产分类", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        supplier: [
          { required: true, message: "请输入供应商", trigger: "blur" },
        ],
        register_time: [
          { required: true, message: "请选择入库时间", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
      },
      asset: {
        asset_id: "",
        asset_name: "",
        classification: "",
        unit: "",
        price: "",
        supplier: "",
        register_time: "",
        register_time: "",
        status: "",
      },
      imageUrl: "",
    };
  },
  created(){
    this.getClassificationData();
  },
  methods: {
    //获取资产分类数据
    async getClassificationData(){
      var res = await this.$http.get("classification/getClassification"); 
      this.classificationData = res.data.data;
    },

    //提交入库资产数据
    async toInsert() {
      this.$refs.asset.validate(async (valid) => {
        if (valid) {
          //修改日期格式
          this.asset.register_time = Moment(this.asset.register_time).format(
            "YYYY-MM-DD"
          );
          var res = await this.$http.post("/assets/addAssetsInfo", this.asset);
          this.$message({
            type: "success",
            message: "入库成功！",
          }),
            (this.asset = {});
        } else {
          this.$message({
            type: "warning",
            message: "入库失败,请检查参数！",
          });
        }
      });
    },
    //重置表单
    resetForm(formName) {
      // 重置表单验证
      this.$refs[formName].resetFields();
      this.form = {};
      this.imageUrl = "";
    },
  },
};
</script>

<style>
.name {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-left:500px; */
  color: black;
  font-size: 25px;
  /* line-height:100px; */
  height: 100px;
}
.register {
  margin-left: 300px;
}
.el-form-item > .el-form-item__label {
  font-size: 16px;
  color: black;
}
.el-form-item__content > .el-form-item__error {
  font-size: 14px;
  color: red;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.footer {
  margin-left: 180px;
}
</style>
